<!--
 * @Author: wangming
 * @Date: 2021-05-28 11:15:09
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-20 11:46:57
 * @Description: file content
-->
<template>
  <div :style="{ textAlign: config.__config.position }" class="p15 ks-col">
    <draggable
      :list="config.children"
      :delay="50"
      :forceFallback="true"
      class="drawing-board"
      :animation="200"
    >
      <div
        :class="{
          btnactive: item.key === getModelForm.key,
          [item.__config.type]: !!item.__config.type,
        }"
        class="dib mb5 ml5 mr5 bths sz f12 tc poi bgwh"
        :key="index"
        v-for="(item, index) in config.children"
        @click.stop="
          handleAdd({ newIndex: index, type: 'click' }, config.children)
        "
        :style="{ width: item.__config.width + 'px', height: '32px' }"
      >
        <i class="menu-icon mr5" :class="item.__config.icon"></i>
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import mixins from "./mixins.js";
export default {
  mixins: [mixins],
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.bths {
  border: 1px solid #dcdfe6;
  padding: 9px 15px;
  border-radius: 3px;
  &:hover {
    border: 1px solid var(--hancode-color);
  }
}
.btnactive {
  border: 1px solid var(--hancode-color);
  color: var(--hancode-color);
  font-weight: 500;
  transform: scale(1.1);
  opacity: 1 !important;
}
.primary {
  background-color: var(--hancode-color);
  color: #fff;
  opacity: 0.7;
}
.success {
  background-color: #67c23a;
  color: #fff;
  opacity: 0.7;
}
.info {
  background-color: #909399;
  color: #fff;
  opacity: 0.7;
}
.warning {
  background-color: #e6a23c;
  color: #fff;
  opacity: 0.7;
}
.danger {
  background-color: #f56c6c;
  color: #fff;
  opacity: 0.7;
}
</style>
